<template>
   <div class="foodlist">
        <el-table
          style="min-height:300px;"
          v-loading="isLoading"
          :data="foodList" stripe border
          :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
          <el-table-column width="50" type="index" label="序号"></el-table-column>
          <el-table-column prop="name" label="名字"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img style="width:120px;display:block;margin: 0 auto;" :src="scope.row.pic"/>
            </template>
          </el-table-column>
          <el-table-column prop="cookingtime" label="烹饪时间"></el-table-column>
          <el-table-column prop="tag" label="标签"></el-table-column>
          <el-table-column prop="detail" label="详情">
            <template slot-scope="scope">
              <button @click="getDetail(scope.row.id)">点击查看</button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            @current-change="change"
            :total="100">
          </el-pagination>
        </div>
      </div>
</template>

<script>
import { getFoodsByPage } from "../service/foods";
export default {
  name: "FoodList",
  data() {
    return {
      foodList: [],
      isLoading: true,
      page: 1, 
      classid: '',
      id:'',
    };
  },

  methods: {
    change(p) {
      this.isLoading = true;

      this.page = p;

      this.foodList = [];

      this.loadData();
    },
    getDetail(id) {
      this.isLoading = true;
      this.$router.push({
        name:'Detail',
        query:{
          id, // 相当于 id:id
        },
      })
    },
    loadData() {
      this.classid = this.$route.query.classid;
      getFoodsByPage(this.classid, (this.page - 1) * 10, 10).then(res => {
        this.isLoading = false;
        // this.page+=1; 自认为多余的  有待商榷
        this.foodList = res.data.result.list;
      });
    },

    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }
  },
  created() {
    this.loadData();
  },
  watch: {
     $route() {
      this.classid = this.$route.query.classid;
      this.loadData();
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 button{
   border:none;
   padding: 5px 10px;
   background: lightgreen;
 }
</style>
